<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>OpenHarmony架构信息</title>

		<!-- For bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

		<!-- For data table -->
		<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

		<!-- For jQuery Modal -->
		<link type="text/css" rel="stylesheet" href="css/jquery.modal.min.css">
 
		<!-- For OHOS css -->
		<link rel="stylesheet" type="text/css" href="css/ohos.archinfo.css">

 		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
 		<script type="text/javascript" src="js/purl.js"></script>

 		<!-- For bootstrap -->
 		<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>

 		<!-- For data table -->
		<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.min.js"></script>

		<!-- For jQuery Modal -->
		<script type="text/javascript" src="js/jquery.modal.min.js"></script>

		<!-- For ohos.archinfo -->
		<script type="text/javascript" src="js/ohos.archinfo.js"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready(function () {
				loadComponents();
			});
		</script>
	</head>
	<body>
		<nav class="navbar fixed-top bg-light border-bottom">
			<div class="container">
				<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
					<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
						<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
						<span class="fs-4">OpenHarmony实时架构信息</span>
					</a>

					<ul id="pages_menu" class="nav nav-pills">
					</ul>

					<div id="products_menu" class="dropdown">
					</div>
				</div>
			</div>
		</nav>

		<div class="fix-sub-top">&nbsp;</div>
		<div class="btn-group me-2 float-end">
			<button type="button" id="all_components" class="btn btn-sm btn-outline-secondary">XML下载</button>
		</div>

		<div id="components_div">
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="components">
			<thead>
				<tr>
					<th width="0%">Id</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">Subsystem</th>
					<th width="15%" style="text-align: center;" class="show_in_line table_header_component">Component</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">总大小</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">bss大小</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">data大小</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">模块个数</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">部件内依赖</th>
					<th width="10%" style="text-align: center;" class="show_in_line table_header_component">依赖部件数</th>
					<th width="15%" style="text-align: center;" class="show_in_line table_header_component">被其它部件依赖数</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
		</div>

		<div class="modal" id="com_deps_dialog">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">依赖信息</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close" value="com_deps_dialog">
						<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="btn-group me-2 float-end">
							<button type="button" id="com_download_xml_deps" class="btn btn-sm btn-outline-secondary">XML下载</button>
							<button type="button" id="com_download_svg_deps" class="btn btn-sm btn-outline-secondary">SVG下载</button>
							<button type="button" id="com_download_png_deps" class="btn btn-sm btn-outline-secondary">PNG下载</button>
							<button type="button" id="com_download_dot_deps" class="btn btn-sm btn-outline-secondary">GraphViz文件下载</button>
						</div>
						<div id="com_deps_div">
							<table cellpadding="0" cellspacing="0" border="0" class="display" id="com_depends">
							<thead>
								<tr>
									<th class="component_th">Id</th>
									<th class="component_th show_in_line">调用部件</th>
									<th class="component_th show_in_line">被调用部件</th>
									<th class="component_th show_in_line">调用次数</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							</table>
						</div>
					</div>
					<div class="modal-footer">
					</div>
				</div>
			</div>
		</div>

		<div class="modal" id="module_dialog">
		</div>

		<!-- depends dialog for direct, indirect depends -->
		<div class="modal" id="deps_dialog">
		</div>

		<div class="modal" id="help_info_dialog" role="dialog">
		</div>

		<!-- Modal HTML embedded directly into document -->
		<div id="symbol_dialog" class="modal">
		</div>

		<!-- Modal HTML embedded directly into document -->
		<div id="callinfo_dialog" class="modal">
		</div>

		<!-- Modal HTML embedded directly into document -->
		<div id="processes_dialog" class="modal">
		</div>

		<!-- Modal HTML embedded directly into document -->
		<div id="vmas_dialog" class="modal">
		</div>

		<div id="callgraph">
			<object id="svg_callgraph" type="image/svg+xml">
		</div>

	</body>
</html>
